<template>
    <div class="category">
       <!-- 头部搜索框 -->
       <van-search input-align='center' placeholder="请输入搜索关键词" />
      
       <!-- 列表 -->
        <div class="content">
          <van-tree-select
            :items="items"
            :active-id.sync="activeId"
            :main-active-index.sync="activeIndex"
            height='calc(100vh - 104px)'
            @click-nav='changeLeft'
          >
          <template slot="content">
            <div class='imgbanner'>
              <img width="100%" :src="bannerImg" alt="">
             </div>
             <!-- 九宫格列表 -->
             <van-grid :column-num="3">
                <van-grid-item v-for="(item,index) in subCategoryList" :key="index" 
                :icon="item.wap_banner_url" :text="item.name" 
                :to="'/categoryList/'+item.id" >
                </van-grid-item>
            </van-grid>
          </template>
        </van-tree-select>
        </div>


      <!-- 底部tarbar -->
    <tar-btn></tar-btn>
    </div>
</template>

<script>
import tarBtn from '../components/tar-btn.vue'
import axios from 'axios'
import api from '../assets/config/api'
export default {
    name:'category',
    data(){
      return {
       active: 0,
      //  items: [{ text: '分组 1' }, { text: '分组 2' }],
       activeId: 1,
      activeIndex: 0,
      dataList:{},
      bannerImg:'',
      subCategoryList:[]
      }
    },
    components:{
      tarBtn
    },
  async mounted(){
    var res = await axios.get(api.CatalogList).then( ({data}) => {
      var res = data.data
      return res;
    })
    console.log(res)
    // 获取列表text
    this.dataList = res
    // 获取右边列表
      // 顶部图片
    this.bannerImg = res.currentCategory.img_url;
     // 列表
     this.subCategoryList = res.currentCategory.subCategoryList
  },
  computed: {
    items:function(){
            if(this.dataList.categoryList==undefined){
                return []
            }else{
                let arr = []
                this.dataList.categoryList.forEach((item,index)=>{
                    item.text = item.name
                    arr.push(item)
                })
                return arr;
              }
    }
   },
   methods: {
    changeLeft:function(index){
      console.log(index)
      this.activeIndex = index;
    }
   },
   watch: {
        activeIndex:async function(){
            if(this.items.length!==0){
                let id = this.items[this.activeIndex].id
                console.log(id)
                let res = await axios.get(api.CatalogCurrent,{params:{id}})
                //console.log(res)
                this.subCategoryList = res.data.data.currentCategory.subCategoryList
                this.bannerImg = this.items[this.activeIndex].img_url;
                console.log(this.subCategoryList)
            }else{
                this.subCategoryList =  []
            }
            
        }
    }
 
}
</script>

<style lang="less" scoped>
.van-sidebar-item{
  text-align: center;
}
.van-sidebar{
  background-color:  #fafafa;
}
.imgbanner{
            width: 100%;
            box-sizing: border-box;
            padding: 10px;
 }
.content{
  .van-grid-item__text{
    font-size: 16px;
  }
}
</style>